<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET 练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 1000px;
            height: auto;
            margin: 50px auto;
            overflow: hidden;
        }

        hr {
            margin: 10px 0;
        }

        .container .hero-list {
            margin: 0 -10px;
        }

        .item {
            width: 10%;
            float: left;
            padding: 0 10px;
            text-align: center;
            margin-bottom: 10px;
        }

        .item img {
            width: 100%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>

<body>
    <!-- http://api.xiaohigh.com:8090/lol -->
    <div class="container">
        <h2>英雄列表</h2>
        <hr>
        <div class="hero-list">
            <!-- 单个的英雄元素 -->
            <!-- <div class="item">
                <img src="https://game.gtimg.cn/images/lgamem/act/lrlib/img/HeadIcon/H_S_10001.png" alt="">
                <h5>盖伦</h5>
            </div> -->

        </div>
    </div>

    <script>
        //获取 按钮
        let btn = document.querySelector("button");
        let heroList = document.querySelector(".hero-list");
            //绑定事件
            (async function () {
                try {
                    let result = await axios({
                        method: 'get',
                        url: 'http://api.xiaohigh.com:8090/lol'
                    });
                    //成功的情况  result = {data: 响应体}
                    let { data } = result;
                    //遍历
                    for (let i = 0; i < data.length; i++) {
                        //动态的创建 div
                        let div = document.createElement('div');
                        //设置 div 的 class 属性
                        div.className = 'item';
                        //创建 img 元素
                        let img = document.createElement('img');
                        //设置 img 的 src 属性
                        img.src = data[i].avatar;
                        //创建 h5 元素
                        let h5 = document.createElement('h5');
                        h5.innerHTML = data[i].name.substr(0, 6);
                        //组装
                        div.appendChild(img);
                        div.appendChild(h5);
                        //插入到 heroList
                        heroList.appendChild(div);
                    }
                } catch (e) {
                    console.log('网络异常,请稍后再试!');
                }
            })()

    </script>
</body>

</html>